<mat-card class="page-title">
    <div class="btn-toolbar float-left" role="toolbar">
        <button mat-icon-button (click)="globalService.toggleSideNav()">
            <mat-icon color="primary">menu</mat-icon>
        </button>
    </div>
    <span>应用管理</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <button mat-icon-button (click)="createApplication()" matTooltip="添加应用" *ngIf="canCreate()">
            <mat-icon color="primary">add</mat-icon>
        </button>
        <span>&nbsp;&nbsp;</span>
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card style="margin-bottom: 50px">
    <input name="search" type="text" class="form-control" placeholder="搜索" [(ngModel)]="filter"
           (blur)="refresh()" style="width:200px">
    <br>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th><span>id</span> <span class="fa fa-sort"></span></th>
                <th><span>应用名称</span> <span class="fa fa-sort"></span></th>
                <th><span>URL</span></th>
                <th><span>主题1</span> <span class="fa fa-sort"></span></th>
                <th><span>主题2</span> <span class="fa fa-sort"></span></th>
                <th><span>主题3</span> <span class="fa fa-sort"></span></th>
                <th><span>所需角色</span></th>
                <th><span>显示控制</span> <span class="fa fa-sort"></span></th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody *ngIf="applications">
                <tr *ngFor="let application of applications; trackBy: trackIdentity">
                    <td>{{application.id}}</td>
                    <td><a (click)="viewApplication(application)">{{application.name}}</a></td>
                    <td>{{application.url}}</td>
                    <td>{{application.subject1}}</td>
                    <td>{{application.subject2}}</td>
                    <td>{{application.subject3}}</td>
                    <td>{{application.needRoles}}</td>
                    <td>{{application.displayOrder}}</td>
                    <td width="100px">
                        <a (click)="editApplication(application)" matTooltip="编辑" *ngIf="canEdit(application)">
                            <span class="fa fa-edit" style="color: #673ab7"></span>
                        </a>
                        &nbsp;&nbsp;
                        <a (click)="deleteApplication(application)" matTooltip="删除" *ngIf="canDelete(application)">
                            <span class="fa fa-trash" style="color: red"></span>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
